<template>
	<view>
		<view id="listTop" :style="{background: 'rgba(255, 255, 255)' }" :class="['fixedTop_'+fixedType]">
			<view v-if="fixedType=='bottom'&&sumList&&sumList.length>0" class="tab-bar-line"></view>
			<slot name="sum">
				<view v-for="(listItem,index) in sumList" :index="index" :key="index">
					<view style="padding: 10px;">
						<uni-row v-for="(litem,index) in listItem.list" :key="index">
							<uni-col v-for="(citem,index) in litem.content" :key="index"
								:span="getListContent(litem.content)">
								<view style="padding: 5px;">
									<text>{{citem.title}}: </text>
									<text
										:style="{'font-size':citem.fontSize?citem.fontSize+'px':'16px','color':citem.color?citem.color:'#ff0000'}">{{citem.value}}</text>
								</view>
							</uni-col>
						</uni-row>
					</view>
				</view>
			</slot>
			<view v-if="fixedType=='top'&&sumList&&sumList.length>0" class="tab-bar-line"></view>
		</view>

		<scroll-view :style="{ height: swiperHeight+ 'px' }" :scroll-y="scrollY" :scroll-x="scrollX"
			:scroll-top="scrollTop" @scroll="_listScroll" @scrolltolower="_scrolltolower">
			<view v-if="fixedType=='top'" :style="{height:listSumHeight+ 'px'}">

			</view>

			<view style="height: 6px;"></view>
			<!-- 占位元素如果scroll-view中第一个元素设置margin-top属性会出现滚动条发生滚动 -->
			<view style="content: ''; overflow: hidden;"> </view>
			<!-- <checkbox-group @change="getMulSelect"> -->
			<view :id="'row_'+index" v-for="(listItem,index) in listInfo" :index="index" :key="index"
				@longpress="_longpress(index)" @touchend="_touchEnd" @touchmove="_touchMove">
				<view hover-class="hoverClass">
					<view style="margin:0px 10px 6px 10px;">
						<uni-list-item :border="false" direction="column" style="border-radius: 7px;">
							<template v-slot:body>
								<!-- <view style=" display: flex;flex-direction: row;"> -->
								<view @click.stop="_itemClick(index)">
									<view style="background-color: #ffffff;display: flex;flex-direction: row;">

										<view v-if="isMultSelect&&isShowMulSel"
											style=" height: 100%; align-self: center;">
											<checkbox :value="String(index)" :checked="isCheck(index)"
												@click.stop="getMulSelect(index)"></checkbox>
										</view>
										<view style="width: 100%;">
											<uni-row v-for="(litem,rindex) in listItem.list" :key="rindex">
												<uni-col v-for="(citem,cindex) in litem.content" :key="cindex"
													:span="getListContent(litem.content)">
													<view
														:class="[citem.isOver!=undefined&&citem.isOver?'text-overflow':'']"
														style="padding: 3px 0px 3px 0px;  ">
														<text v-if="citem.title"
															style="font-size: 11px;">{{citem.title}}: </text>

														<text
															:style="{'font-size':citem.fontSize!=undefined?citem.fontSize+'px':'15px','color':citem.color!=undefined?citem.color:'#686765','color':_cellColorStyle(index,citem.code)}">
															{{citem.value}}</text>
													</view>
												</uni-col>
											</uni-row>
										</view>
									</view>
								</view>
								<view v-if="isRight"
									style="position: absolute; right: 0;height: 100%; display: flex;flex-direction: row;align-items: center;">
									<uni-icons color="#c2c2c2" :size="20" type="right"></uni-icons>
								</view>

								<!-- </view> -->
								<slot :msg="index"></slot>
							</template>
							<!-- <template v-slot:footer> -->

							<!-- </template> -->
						</uni-list-item>
					</view>
				</view>
			</view>
			<!-- </checkbox-group> -->
			<uni-load-more v-if="loadMore" :status="loadStaus"> </uni-load-more>
			<view v-if="fixedType=='bottom'" :style="{height:listSumHeight+ 'px'}">

			</view>
			<view :style="{height:listBottomHeight+ 'px'}">

			</view>
		</scroll-view>
	</view>
	<view v-if="isMultSelect&&isShowMulSel" style="position: absolute; width: 100%; bottom: 0;">
		<view style="margin: 0px 10px 0px 10px;background-color: #f5f5f5; ">
			<view
				style="padding: 0px 10px 0px 10px; height: 50px; display: flex;justify-content: space-between;align-items: center;">
				<view @click="backSelect" style="display: flex;flex-direction: column;">
					<uni-icons color="#000000" :size="25" type="arrow-left"></uni-icons>
					<text style="font-size: 9px;">返回</text>
				</view>
				<view @click="_delSelectInfo" style="display: flex;flex-direction: column; align-content: center;">
					<uni-badge :customStyle="{background: '#e60000'}" :text="selectNumber" absolute="rightTop"
						size="small">
						<uni-icons color="#000000" :size="25" type="trash"></uni-icons>
					</uni-badge>
					<text style="font-size: 9px;">删除</text>
				</view>
				<view @click="allSelect" style="display: flex;flex-direction: column;">
					<uni-icons customPrefix="iconfont" color="#000000" :size="25" type="layui-icon-template-1">
					</uni-icons>
					<text style="font-size: 9px;">全选</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import * as SystemJs from '../../common/system.js'
	/**
	 * listView 列表
	 * @description  item列表视图页面
	 * @property {Array} headData item显示格式模板
	 * @property {Array} listData 数据列表
	 * @property {Array} sumHeadData 汇总行的显示格式模板
	 * @property {Array} sumListData 汇总行的数据列表 
	 * @property {Number} swiperHeight 允许滑动的高度
	 * @property {Number} listBottomHeight 列表末尾数据到底部距离的高度
	 * @property {Boolean} loadMore=[true | false] 是否显示底部提示信息 true / false
	 * @property {String} loadStaus 底部提示信息样式 noMore 无信息 / loading 正在加载
	 * @property {Boolean} scrollX=[true | false]   是否允许横向滑动 true / false
	 * @property {Boolean} scrollY=[true | false]   是否允许竖向滑动 true / false
	 * @property {String} fixedType 汇总栏信息显示位置 top 默认 / bottom
	 * @property {Function} cellColorStyle 修改单元格样式方法
	 */
	export default {
		name: "listView",
		emits: ['itemClick', 'scrolltolower', 'listScroll', 'longPress', 'delSelectInfo'],
		props: {
			headData: {
				type: Array,
				default: []
			},
			listData: {
				type: Array,
				default: []
			},
			sumHeadData: {
				type: Array,
				default: []
			},
			sumListData: {
				type: Array,
				default: []
			},
			swiperHeight: {
				type: [String, Number],
				default: 0
			},
			loadMore: {
				type: [String, Boolean],
				default: true
			},
			loadStaus: {
				type: String,
				default: 'noMore'
			},
			scrollX: {
				type: [String, Boolean],
				default: false
			},
			scrollY: {
				type: [String, Boolean],
				default: false
			},
			fixedType: {
				type: String,
				default: 'top'
			},
			isRight: {
				type: [String, Boolean],
				default: false
			},
			cellColorStyle: {
				type: Function,
				default: undefined
			},
			isMultSelect: {
				type: [Boolean, String],
				default: false
			},
			listBottomHeight:{
				type:[String,Number],
				default:0
			}
		},
		data() {
			return {
				listInfo: [],
				sumList: [],
				listSumHeight: 0,
				listHeight: 0,
				scrollTop: 0,
				isShowMulSel: false,
				selectRang: [],
				selectAll: false,
				selectNumber: 0,
				isLongTouch: false
			};
		},
		watch: {
			//监听数据的变化事件
			listData(newVal) {
				if (newVal != undefined) {
					//添加延时防止汇总信息栏高度未计算完成时，部分信息被隐藏
					var timeOut = setTimeout(() => {
						this.listInfo = SystemJs.unitJs.createListItemInfo(this.headData, this.listData);
						clearTimeout(timeOut)
					}, 300)
				}
			},
			//监听数据的变化事件
			sumListData(newVal) {
				console.log(newVal)
				if (newVal != undefined) {
					this.sumList = SystemJs.unitJs.createListItemInfo(this.sumHeadData, this.sumListData);
				}
			},
			sumHeadData() {
				var timeOut = setTimeout(() => {
					// this.getDomInfo();
					SystemJs.systemJs.getByIdHeight("listTop", this, 'listSumHeight');
					clearTimeout(timeOut)
				}, 100)
			}
		},
		mounted() {

			// this.$nextTick(() => {

			// })

		},
		methods: {
			/**
			 * 自动定位数据
			 */
			async autoScrollRow(index) {
				if (this.bodyData != undefined && this.bodyData.length > 0) {
					if (index) {
						var first = await this.getDomInfo('row_0');
						var end = await this.getDomInfo('row_' + (this.bodyData.length - 1))
						if (end && first) {
							if ((end.top - first.top) <= (this.swiperHeight - this.listSumHeight)) {
								return;
							}
						}
						var obj = await this.getDomInfo('row_' + index);
						if (first && obj) {
							this.scrollTop = obj.top - first.top
						}
					}
				}
			},
			getDomInfo(id) {
				return new Promise((resolve) => {
					let element = '#' + id;
					const query = uni.createSelectorQuery().in(this);
					query.select(element).boundingClientRect();
					query.selectViewport().scrollOffset();
					query.exec((res) => {
						console.log(res)
						if (res && res[0]) {
							resolve(res[0]);
						} else {
							resolve("");
						}
					});
				})
			},
			//列表元素点击事件
			_itemClick(index) {
				var delIndex = this.selectRang.indexOf(String(index));
				if (delIndex > -1) {
					this.selectRang.splice(delIndex, 1)
				} else {
					this.selectRang.push(String(index))
				}
				// console.log(this.selectRang)
				this.$emit('itemClick', index)
			},
			//滑动到底部的触发事件
			_scrolltolower(e) {
				this.$emit('scrolltolower', e)
			},
			//滑动事件
			_listScroll(e) {
				this.$emit('listScroll', e)
			},
			//长按事件
			_longpress(index) {
				this.isLongTouch = true;
				//延迟一秒后执行
				setTimeout(() => {
					if (this.isLongTouch) {
						this.isShowMulSel = true;
						this.$emit('longPress', index)
					}
				}, 800)
			},
			//cellStyle自定义字段显示样式
			_cellColorStyle(index, code) {
				var color = "";
				var obj = {};
				obj.index = index;
				obj.code = code;
				if (this.cellColorStyle) {
					color = this.cellColorStyle(obj);
				}
				return color;
			},
			/**
			 * 判断该复选框是否选中
			 * @param {Object} index
			 */
			isCheck(index) {
				var flag = false;
				if (this.selectRang && this.selectRang.length > 0) {
					flag = this.selectRang.includes(String(index))
					this.selectNumber = this.selectRang.length;
				} else {
					this.selectNumber = 0;
				}

				return flag;
			},
			/**
			 * 勾选复选框事件
			 */
			getMulSelect(index) {
				var delIndex = this.selectRang.indexOf(String(index));
				if (delIndex > -1) {
					this.selectRang.splice(delIndex, 1)
				} else {
					this.selectRang.push(String(index))
				}
				console.log(this.selectRang)
			},
			/**
			 * 取消选择
			 */
			backSelect() {
				this.isShowMulSel = false;
				this.selectRang = [];
			},
			/**
			 * 全选择
			 */
			allSelect() {
				this.selectAll = !this.selectAll;
				if (this.selectAll) {
					if (this.listData != undefined && this.listData.length > 0) {
						for (var i = 0; i < this.listData.length; i++) {
							var delIndex = this.selectRang.indexOf(String(i));
							if (delIndex < 0) {
								this.selectRang.push(String(i))
							}
						}
					}
				} else {
					this.selectRang = [];
				}
			},
			_delSelectInfo() {
				// this.isShowMulSel = false;
				// this.selectRang=[];
				this.$emit('delSelectInfo', this.selectRang)
			},
			//获取列表内容中每行的个数
			getListContent(content) {
				var count = 0;
				if (content.length > 0) {
					count = 24 / content.length
				}
				return count;
			},
			//结束触摸事件
			_touchEnd() {
				this.isLongTouch = false;
			},
			//触摸移动事件
			_touchMove() {
				this.isLongTouch = false;
			}
		}
	}
</script>

<style>
	.fixedTop_top {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: #fff;
	}

	.fixedTop_bottom {
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 999;
		background-color: #fff;
	}

	.text-overflow {
		overflow: hidden;
		text-overflow: ellipsis;
		/* white-space: nowrap; */
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;

	}

	/* 按压样式 */
	.hoverClass {
		background-color: #ececec;
	}
</style>